<template>
  <div>
    <div style="height: 50px;">
      <div style="color: white;float: left;font-size: 24px;    width: 95%;">文章管理：</div>
      <div style="float: left;height: 50px;">
        <router-link :to="dada">
          <div>
            <Button type="primary" >
              添加
            </Button>
          </div>
        </router-link>
      </div>
    </div>

    <div>
      <Table :columns="columns1" :data="data1"></Table>
    </div>
    <div style="text-align: center; margin-top: 63px;">
      <Page show-total :total="total" :page-size="pageSize" show-elevator="true" @on-change="findPage"></Page>
    </div>
    <Modal
      v-model="modal6"
      title="Title"
      :loading="loading"
      @on-ok="asyncOK">
      <p>确定要删除姓名为：{{deleteName}}的信息么？</p>
    </Modal>
  </div>


</template>
<script>
  export default {
    data () {
      return {
        deleteName:'',
        deleteid:'',
        modal6: false,
        loading: true,
        dada:'AddArticle',
        pageNo:1,
        pageSize:10,
        total:'',
        columns1: [
          {
            title: '文章标题',
            key: 'title',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'compose'
                  }
                }),
                h('strong', params.row.title)
              ]);
            }
          },
          {
            title: '时间',
            key: 'time'
          },
          {
            title: '状态',
            key: 'state'
          },
          {
            title: '操作',
            key: 'deal',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.row)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index,params.row)
                    }
                  }
                }, '删除'),

              ]);
            }
          }

        ],
        data1: [],
      }
    },
    components:{

    },
    created(){
      this.findpersons();
    },
    methods:{
      show(data){
        console.log('data.............................',data);
        this.$router.push({path: '/AddArticle',query:{id:data.id}});
      },
      asyncOK () {

        this.modal6 = false;
        this.$http.get("/api/article/delete?id="+this.deleteid)
          .then(response => {
            console.log("获取信息成功");
            // this.$router.replace({ path: '/home'});
            this.data1.length=this.data1.length-1;
            this.data1.sort();
            alert("删除成功");
            this.findpersons();
          }, response => {
            console.log("获取信息失败");
            alert("删除失败");
          })
      },
      remove (data,hehe) {

//        this.data1.splice(data, 1);
        this.deleteName=hehe.name;
        this.deleteid=hehe.id;
        this.modal6=true;
      },
      findPage(page){
        this.pageNo=page;
        this.findpersons();
      },
      findpersons(){
        var lele=this;
        var pageNo1;
        if(this.data1.length==0 && this.total>=1){
          pageNo1=(lele.pageNo-2)*lele.pageSize;
        }
        else{
          pageNo1=(lele.pageNo-1)*lele.pageSize;
        }
        this.$http.get("/api/article/listByPage?pageNo="+pageNo1+"&&pageSize="+lele.pageSize)
          .then(response => {
            console.log("获取信息成功");
            lele.data1=response.data.data;
            lele.total=response.data.total;
            console.log("reponse.data....",response.data);
          }, response => {
            console.log("获取信息失败");
            console.log(response);
          })
      },
    },
  }
</script>
